<template>
  <div style="width:100%;height:100%;">
    <div style="min-height:60px;width:100%;text-align: center;">
        <h2>crm系统表单示例</h2>
    </div>
    <el-container style="min-height:500px;">
        <el-main>
            <el-form class="crm-form" style="min-height:60px;width:98%;" label-width="80px" label-position="top" :hide-required-asterisk="false" :inline="false" label-suffix=":">
                <el-row  :gutter="24" type="flex">
                    <el-col>
                       <div class="form-title-background" style="min-height:30px;width:100%;">
                            <div style="width:100%;display:flex;align-items:flex-start;justify-content:space-between;">
                                <h3>客户信息</h3>
                                <div style="display: inline;margin-top: 18px;margin-right: 10px;">
                                    <i class="el-icon-user-solid"></i>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row  :gutter="24" type="flex">
                    <el-col >
                        <el-form-item style="min-height:40px;" label="姓名" :inline-message="false" required>
                            <el-input placeholder="请输入姓名" v-model="elInput8.value">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item style="min-height:40px;" label="性别">
                            <el-radio-group style="width:100%;display:table-cell;vertical-align: middle;height: 38px;" v-model="elRadioGroup10.value">
                                <el-radio label="1">
                                    男
                                </el-radio>
                                <el-radio label="2">
                                    女
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row  :gutter="24" type="flex">
                    <el-col >
                        <el-form-item style="min-height:40px;" label="年龄">
                            <el-input-number style="width:100%;" :min="10" :max="100" label="" v-model="elInputNumber24.value">
                            </el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item style="min-height:40px;" label="评分">
                            <el-rate style="margin-top: 10px;" v-model="elRate25.value">
                            </el-rate>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row  :gutter="24" type="flex">
                    <el-col>
                        <el-form-item class="background" style="min-height:40px;" label="家庭住址">
                            <el-input placeholder="请输入地址" v-model="elInput14.value">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row  :gutter="24" type="flex">
                    <el-col>
                        <el-form-item style="min-height:40px;" label="电子邮件">
                            <el-input placeholder="you@example.com" v-model="elInput16.value">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-main>
        <el-aside width="300px">
            <div style="margin-top: 35px;min-height:30px;width:100%;">
                <h3>信用及优惠信息</h3>
            </div>
            <el-table style="width:100%;" stripe :border="false" :data="elTable26.data" :show-header="false">
                <el-table-column prop="item" label="日期" width="">
                    <template slot-scope="scope">
                        <i class="el-icon-bank-card"></i>
                        <span style="margin-left: 10px">{{ scope.row.item}}</span>
                      </template>
                </el-table-column>
                <el-table-column prop="state" label="姓名" width="">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px;color: green;font-weight: bolder;">{{ scope.row.state}}</span>
                      </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 18px;border: 1px solid rgb(231, 230, 230);padding:15px 10px;">
                <el-input placeholder="输入促销代码" v-model="elInput34.value">
                    <el-button slot="append" style="color:black;font-size:16px;font-weight: bolder;">激活</el-button>
                </el-input>
            </div>
        </el-aside>
    </el-container>
    <div style="min-height:60px;width:100%;">
        <div style="margin-top: 35px;margin-left: 15px;margin-bottom: 35px;width:100%;">
            <h3>支付方式</h3>
            <div style="width:100%;display:grid;grid-template-columns:1fr 10fr;justify-content:center;align-content:center;justify-items:center;">
                <div style="width:100%;padding-top: 30px;">
                    <el-checkbox v-model="elCheckbox56.value">
                        微信
                    </el-checkbox>
                </div>
                <div style="width:100%;">
                    <el-image style="width:80px;height:80px;" fit="fill" src="/${workspaceFolder}/src/assets/wepay.jpg">
                    </el-image>
                </div>
                <div style="width:100%;padding-top: 30px;">
                    <el-checkbox v-model="elCheckbox59.value">
                        支付宝
                    </el-checkbox>
                </div>
                <div style="width:100%;">
                    <el-image style="width:80px;height:80px;" fit="fill" src="/${workspaceFolder}/src/assets/alipay.jpg">
                    </el-image>
                </div>
            </div>
        </div>
    </div>
    <div style="width:100%;margin-left:18px;display:flex;align-items:flex-start;">
        <el-button style="width:300px;" type="primary">
            确认并保存
        </el-button>
    </div>
  </div>
</template>
<script>
const childrenProps = {};

export default {
    component : {
    },
    data(){
        return {
            //data定义,
            elInput8 : {"value":""},
    elRadioGroup10 : {"value":"2"},
    elInputNumber24 : {"value":25},
    elRate25 : {"value":4},
    elInput14 : {"value":""},
    elInput16 : {"value":""},
    elTable26 : childrenProps.elTable26(),
    elInput34 : {"value":""},
    elCheckbox56 : {"value":true},
    elCheckbox59 : {"value":true},
        };
    },
}

childrenProps.elTable26 = function(){
    return {
        "data":[{
                "item":"购物卡",
                "state":"$100",
            },{
                "item":"优惠券",
                "state":"$1000",
            },{
                "item":"VIP",
                "state":"$1000",
            },{
                "item":"内部客户",
                "state":"-$200",
            },],
    }
};

</script>
<style type="css" scoped>
</style>